<template>
  <view class="ditu" :style="{ height: height + 'px' }">
    <avatar :user="user"></avatar>

    <input-model :itemModel="models" @send="receiveFromChild"></input-model>

    <view class="ditu_box">
      <view class="flex">客户照片</view>
      <u-line margin="20rpx 0rpx"></u-line>
      <view>
        <u-upload :fileList="fileListUrl" @afterRead="afterRead" @delete="deletePic" capture="camera" name="1" :maxCount="3">
          <view class="photoinfo"> <image src="/static/image/pic_icon.png" mode="widthFix"></image></view>
        </u-upload>
      </view>
    </view>

    <view class="bottom">
      <button class="btn back" @click="back">取消</button>
      <button class="btn" @click="submit">确认</button>
    </view>
  </view>
</template>

<script>
import { getScreen, saveImage, curTime, getUserInfo } from '@/service/auth'
import { addWorkLog } from '@/service/api/common_down'
import avatar from '@/components/avatar.vue'
import inputModel from '@/components/InputModel.vue'
import { appBasCustomerAddOrSave } from '@/service/api/logistics'
export default {
  components: { avatar, inputModel },
  data() {
    return {
      imageurl: [],
      time: '',
      type: '',
      replaceTime: '',
      reason: '',

      typename: '',
      fileListUrl: [],
      currentDate: '',
      user: {},
      remark: '',
      imgUrl: [],
      models: [],
      form: {
        code: '',
        contactName: '',
        contactPhone: '',
        address: '',
        name: '',
        imageUrl: '',
      },
    }
  },
  created() {
    const that = this
    const { height } = getScreen()
    this.height = height
    this.models = [
      {
        label: '客户编码',
        value: '',
        disabled: false,
        input: 'text',
        placeholder: '请输入',
      },
      {
        label: '客户名称',
        value: '',
        disabled: false,
        input: 'text',
        placeholder: '请输入',
      },
      {
        label: '联系人',
        value: '',
        input: 'text',
        placeholder: '请输入',
      },
      {
        label: '联系方式',
        value: '',
        input: 'number',
        placeholder: '请输入',
      },
      {
        label: '地址',
        value: '',
        input: 'text',
        placeholder: '请输入',
      },
    ]
  },
  onLoad(option) {
    this.currentDate = curTime()
    this.user = getUserInfo()
  },
  methods: {
    receiveFromChild(data) {
      if (data) {
        this.models[data.index].value = data.data.value
      }
    },
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    submit() {
      const _this = this
      console.log(_this.models)
      _this.form.code = _this.models[0].value
      _this.form.name = _this.models[1].value
      _this.form.contactName = _this.models[2].value
      _this.form.contactPhone = _this.models[3].value
      _this.form.address = _this.models[4].value
      _this.form.imageUrl = JSON.stringify(_this.imgUrl)
      if (!_this.form.code) {
        uni.showToast({
          title: '请输入客户编码',
          icon: 'none',
        })
        return
      }
      if (!_this.form.name) {
        uni.showToast({
          title: '请输入客户名称',
          icon: 'none',
        })
        return
      }
      uni.showLoading()

      appBasCustomerAddOrSave(this.form)
        .then(res => {
          uni.hideLoading()
          if (res.status === 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            uni.$emit('refreshCustomerData', { refresh: true })
            uni.navigateBack({
              delta: 1,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },

    async afterRead(event) {
      console.log('event=' + JSON.stringify(event))
      const imgId = await this.uploadFilePromise(event.file.url)
      const data = {
        thumb: imgId,
        type: 'image',
        url: imgId,
        oldUrl: imgId,
      }
      console.log(imgId)
      this.fileListUrl.push(data)
      this.imgUrl.push(imgId)
    },
    async uploadFilePromise(url) {
      const _this = this

      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: url,
          success: imageInfo => {
            console.log(imageInfo)
            let scale = (370 / imageInfo.width).toFixed(2)
            const width = imageInfo.width * parseFloat(scale)
            const height = imageInfo.height * parseFloat(scale)
            console.log(scale)
            uni.compressImage({
              src: url,
              compressedWidth: width,
              compressHeight: height,
              quality: 40,
              success: async function (resurl) {
                let compressedFilePath = resurl.tempFilePath;
                _this.uniShowLoading()
                saveImage(compressedFilePath)
                  .then(res => {
                    _this.uniHideLoading()
                    resolve(res)
                  })
                  .catch(error => {
                    _this.uniHideLoading()
                    reject(error)
                  })
              },
              fail: function (err) {
                _this.uniHideLoading()
                reject(error)
                console.log(err)
                console.log('压缩失败：')
              },
            })
          },
        })
      })
    },
    deletePic(e) {
      const index = this.fileListUrl.findIndex(item => e.file.oldUrl === item.oldUrl)

      ~index && this.fileListUrl.splice(index, 1)
      ~index && this.imgUrl.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
.ditu {
  background-color: #f4f5f9;
  padding: 20rpx;
  height: 100vh;
  font-size: 28rpx;
  &_box {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-top: 20rpx;

    .row {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      .label {
        color: #888;
        font-size: 26rpx;
      }
    }
    .border-bottom {
      border-bottom: 1rpx solid #f1f1f1;
    }
    .photoinfo {
      height: 150rpx;
      width: 150rpx;
      border-radius: 20rpx;
      position: relative;
      margin-top: 10rpx;
      image {
        height: 150rpx;
        width: 150rpx;
      }
      .showphoto {
        border-radius: 20rpx;
        width: 150rpx;
        height: 150rpx;
      }
      .del {
        /* background-color: red; */
        color: white;
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 10rpx;
        top: 5rpx;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 25rpx;
        line-height: 30rpx;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
    }
    .back {
      background-color: white;
      color: #333;
      border: 1rpx solid #cbd2de;
    }
  }
}
.canvas-view {
  position: fixed;
  top: -99999999rpx;
}
.canvas {
  width: 250px;
  height: 444px;
  opacity: 0;

  z-index: -999;
}
</style>
